.main{
    max-width: 600px;
    margin: 0 auto;
}



.headWrap{
    height: 14rem;
    width: 100%;
    background:linear-gradient(to right,#965bf1,#788be8)
}

.headNav{
    height: 1.6rem;
    width: 100%;
    z-index: 10;
    line-height: 1.6rem;
    position: relative;
}

.user{
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
    left: 50%;
    margin-left:-.8rem;
    border-radius: 1rem;
    border: 2px solid #fff;
    top: 0;
    background: url("/images/user.png") center;
    background-size: cover;
    opacity: .85;
}

.userPanelContainer{
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    position: absolute;
}

.userPanel{
    background: linear-gradient(to right,#965bf1,#788be8);
    padding:.3rem;
    border: 1px solid rgba(255,255,255,.8);
    position: absolute;
    top: -3rem;
    width: 16rem;
    /*max-width: 600px;*/
    left: 50%;
    margin-left:-8.3rem;
    border-radius: .4rem;
    z-index: 900;
    color: #fff;
    overflow: hidden;
    display: none;
    opacity: 0;
}

.userPanel .userHead{
    text-align: center;
}

.userPanel .userLesson{
    margin:1rem .3rem;
    font-size: .7rem;
    text-align: center;
}

.userPanel .userLesson p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom:.2rem;

}

.userPanel .userLesson p#lessonTitle span{
    border-bottom:1px solid #fff;
}


.headNav img{
    margin: .4rem 0 0 .4rem;
    height: 1rem;
}

.headNav span.backText{
    color: #fcfcfc;
    opacity: .7;
    margin-left:.3rem;
    letter-spacing:.1rem;
}


.userPanel .logout{
    display: block;
    right: 0;
    font-weight: 600;
    color: #fcfcfc;
    opacity: .7;
    text-align: center;
}

.totalAmount{
    position: absolute;
    right: 0;
    top: 0;
    color: #fcfcfc;
    opacity: .7;
    font-size: .7rem;
}

.titleWrap{
    /*border: 1px dashed #ffffff;*/
    width: 100%;
    height: 5rem;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
    padding-top: 1rem;

}

.title{
    opacity: .6;
    letter-spacing: .7rem;
}

.titleCon{
    font-weight: 300;
    overflow: hidden;
    margin: 1rem;

}

.titleCon span{
    display: inline-block;
    border-bottom:1px solid #ffffff;
    padding-bottom: .3rem;
    white-space:nowrap;
}

.faceWrap{
    position: relative;
}

.face{
    border: .8rem solid #fff;
    border-radius:.5rem;
    position: absolute;
    left: 50%;
    margin-left: -9rem;
    width: 6rem;
    height: 6rem;
    /*margin: 0 auto;*/
    background-size: cover;
    background-position: center;
    box-shadow: 0 .6rem .4rem #ddd;
}

.scholarWrap{
    position: absolute;
    left: 50%;
    margin-left:-1rem;
    top: .5rem;
    color: #fed807;
    font-size:.88rem;
    width: 11rem;
    text-align: center;
}

.blank{
    margin: 2rem;
}

.chooseQuestionWrap{
    margin-top: 1rem;
    padding: 0rem .5rem;
}

.scholarWrap{
    height: 2rem;
}

.scholarTitle span.scholarIcon{
    display: inline-block;
    height: 1.6rem;
    width: 1.2rem;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: top;

}

.scholarTitle span.scholarText{
    display: inline-block;
    height: 1.6rem;
    line-height: 1.6rem;
    vertical-align: top;
    margin-left: .4rem;
    font-size: 1.1rem;
}


.questionNum{
    font-size: .9rem;
    color: #bbbbbb;
    font-weight: 600;
    margin-left: 1rem;
    height: 3rem;
    line-height: 3rem;
}

.questionNum:after{
    display: block;
    content:'';
    height: 0;
    margin-left:.4rem;
    width: 3rem;
    border-top:3px solid #965bf1;
}

.answerTip{
    font-size:.75rem;
    font-weight: 800;
    color: #555555;
    text-align: center;
    width: 100%;
    padding-top: 1rem;
    border-top: 2px solid #eeeeee;
}

.questionWrap{
    margin: 1rem 2rem;
    font-size: .9rem;
    font-weight: 500;
    color: #777777;
    line-height:1.9;
}

.question{
    margin-bottom: .5rem;
}

.answerButtonWrap{
    width:16.5rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.answerButton{
    cursor: pointer;
    float: left;
    width: 4rem;
    height: 4rem;
    border-radius:.5rem;
    background: linear-gradient(to top left,#965bf1,#788be8);
    line-height: 4.5rem;
    text-align: center;
    box-shadow: .2rem .2rem .3rem #bbb;
    color: #fcfcfc;
    font-size: 1.6rem;
    margin: .75rem;
}

.answerButton:active{
    box-shadow: 0 0 0  #bbb;
    /*margin-left:1.2rem;*/
    margin-top: 1.2rem;
}

.answerButton.chosen{
    background: linear-gradient(to top left,#e14d97,#d422cb);
    box-shadow: 0 0 0  #bbb;
    /*margin-left:1.2rem;*/
    margin-top: 1.2rem;
    color: #fed807;
}

.scholarMain{
    font-size: 3rem;
    /*margin-top:1rem;*/
}

.scholarTip{
    position: absolute;
    background: #f86e6e;
    width: 9rem;
    left:-1rem;
    height:3rem;
    line-height: 1.5rem;
    color: #fff;
    top: 7rem;
    border-radius:.5rem;
    font-size: .8rem;
    opacity: 0;
}
.alreadyTip{
    position: absolute;
    background: #aaaaaa;
    width: 9rem;
    left:-1rem;
    height:3rem;
    line-height: 1.5rem;
    color: #fff;
    top: 7rem;
    border-radius:.5rem;
    font-size: .8rem;
    opacity: 0;
}



button#submit{
    font-size: 1.5rem;
    background: #ffb515;
    border-radius: .3rem;
    line-height: 44px;
    border: none;
    padding: 0 1.1rem;
    color: #fff;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.apart{
    margin-top: 4rem;
}

.apart p{
    margin: 0 3rem;
    line-height:1.2rem;
    font-size: .8rem;
    color: #7a9da6;
    opacity: 1;
    text-align: center;
}

.apart p:nth-child(1){
    border-top:1px solid #ddd;
    padding-top: 1rem;
}

.articleAnswer{
    border:1px solid #00a2d4;
    /*margin: 10px;*/
    width: 100%;
    padding: 4px;
    font-size: 16px;
    line-height: 20px;
    border-radius:6px;
}

.submitSave{
    font-size: 1.2rem;
    background: #00a2d4;
    border-radius: .3rem;
    line-height: 2.2rem;
    border: none;
    padding: 0 1.1rem;
    color: #fff;
    display: block;
    margin: 1rem auto;
    cursor: pointer;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.articleDesc p{
    margin: 0 3rem;
    line-height:1.2rem;
    font-size: .8rem;
    color: #7a9da6;
    opacity: 1;
    text-align: center;
}

.giftWrap{
    margin: 2rem;
    text-align: center;
    font-size:.9rem;
}

.giftTitle{
    font-weight: 600;
    color: #888;
}

.giftName{
    margin: 1.2rem 0;
    font-size:1.8rem;
    font-weight: 500;
    color: #82c7cd;

}

img.giftImg{
    width: 80%;
    border-radius: .6rem;
}

.pack-wrapper{
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9000;
    display: none;
}

.pack-title{
    position: absolute;
    top: 10%;
    left: 10%;
    width:80%;
    height: 8%;
    background: url('/images/all_right_title.png') no-repeat center;
    background-size: contain;
    /*background-color: #0f0;*/
}

.wrapper-main{
    width: 100%;
    height: 100%;
    max-width:600px;
    margin: 0 auto;
    position: relative;
}

.pack-bg{
    position: absolute;
    top: 22%;
    left: 10%;
    width: 80%;
    height: 60%;
    background:url("/images/pack_bg.png") no-repeat center;
    background-size: contain;
}

.pack-bg .pack-content{
    position: absolute;
    top: 5%;
    width: 120%;
    left: -10%;
    height: 54%;
    background: url("/images/pack_content.png") no-repeat center;
    background-size: contain;
}

.pack-bg .pack-amount{
    color: #ec4d35;
    position: absolute;
    font-size: 2rem;
    font-weight: 600;
    width: 100%;
    text-align: center;
    /*height: 10%;*/
    line-height:2;
    top: 18%;
}

.pack-bg .pack-type{
    position: absolute;
    color: #ec4d35;
    width: 100%;
    font-weight: 300;
    font-size:1.2rem;
    text-align: center;
    top:32%;
}

.pack-bg .pack-desc{
    position: absolute;
    color: #d97c00;
    width: 100%;
    font-weight: 500;
    font-size:.85rem;
    text-align: center;
    top:52%;
}

.pack-bg .pack-text{
    position: absolute;
    color: #fcc707;
    width: 100%;
    font-weight: 500;
    font-size:.85rem;
    text-align: center;
    top:62%;
}

.pack-bg .pack-text span.rijin{
    padding: .3rem 0;
    display: inline-block;
    font-size:1.2rem;
    color: #fcfcfc;
}

.pack-button{
    position: absolute;
    top:78%;
    left: 28%;
    width: 44%;
    height: 15%;
    background: url("/images/get_button.png") no-repeat center;
    background-size: contain;
}

.pack-button p{
    color: #ffea97;
    text-align: center;
    height: 100%;
    line-height: 1;
    margin-top:15%;
    /*padding-top:6%;*/
    font-size:1.4rem;
    font-weight: 600;
}

.wrong-wrapper{
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9000;
    display: none;
}

.wrong-main{
    position: relative;
    max-width: 600px;
    height: 100%;
    margin: 0 auto;
}

.wrong-title{
    position: absolute;
    top: 10%;
    left: 10%;
    width:80%;
    height: 8%;
    background: url('/images/all_wrong_title.png') no-repeat center;
    background-size: contain;
    /*background-color: #0f0;*/
}

.wrong-bg{
    position: absolute;
    top: 22%;
    left: 10%;
    width: 80%;
    height: 60%;
    background:#fcfcfc no-repeat center;
    border-radius: 1rem;
    background-size: contain;
}

.face-record{
    border: .8rem solid #fff;
    border-radius:.5rem;
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -6rem;
    width: 10rem;
    height: 10rem;
    /*margin: 0 auto;*/
    background-size: cover;
    background-position: center;
    box-shadow: 0 .6rem .4rem #ddd;
}

.wrong-button{
    position: absolute;
    top: 60%;
    left: 28%;
    width: 44%;
    height: 15%;
    background: url("/images/get_button.png") no-repeat center;
    background-size: contain;
}

.wrong-button p{
    color: #ffea97;
    text-align: center;
    height: 100%;
    padding-top:20%;
    font-size:1.4rem;
    font-weight: 600;
}

.wrong-desc{
    width: 80%;
    height: 20%;
    top: 20%;
    left: 10%;
    position: absolute;
    opacity: 1;
    text-align: center;
}

.wrong-desc p{
    color: #ffffff;
}

.new-wrapper{
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9000;
    display: none;
}

.new-content{
    width: 90%;
    left: 5%;
    top: 5%;
    height: 90%;
    position: relative;
    background: #f5f7f9;
    border-radius: .5rem;
}

.title-rect{
    height: 20%;
    width: 100%;
    border-radius: .5rem .5rem 0 0;
    background: #289be5;
}

.new-title{
    color: #f5f7f9;
    position: absolute;
    width: 100%;
    top: 3%;
    font-size:1.3rem;
    /*font-weight:400;*/
    text-align: center;
    line-height: 1.8;
}


.you-can-choose{
    color: #7e8589;
    text-align: center;
    top: 25%;
    position: absolute;
    width: 100%;
    font-size:.9rem;
}


.register{
    position: absolute;
    background-color: #289be5;
    top: 32%;
    height: 20%;
    width: 35%;
    right: 10%;
    border-radius: 2px;
    color: #fcfcfc;
    box-shadow: 2px 2px 2px rgba(0,0,0,.12);
    text-align: center;
}

.register-app{
    right: 10%;
}


.register-page{
    left: 10%;
}

.register-page img{
    height: 40%;
    margin-top: 20%;
}

.register-app img{
    margin-top:10%;
    width: 30%;

}


.register p{
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
}

.register p.extra{
    font-size: .7rem;
    font-weight: 500;
    bottom: -18%;
    color: #82cd83;
}

.register-info{
    position: absolute;
    top: 65%;
    width: 100%;
    text-align: center;
    font-size: .8rem;
    color: #777777;
}

.register-info p{
    color: #289be5;
    line-height: 1.8;
}

.register-info p span{
    font-size:1rem;
    color: #f86e6e;
}

.register-info .info-title{
    color: #7e8589;
    text-align: center;
    width: 100%;
    font-size:.9rem;
    margin-bottom:.8rem;
}

.register-info p.extra{
    color: #f86e6e;
}

.success-wrapper{
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9000;
    display: none;
}

.success-title{
    color: #f5f7f9;
    position: absolute;
    width: 100%;
    top: 6%;
    font-size:1.3rem;
    /*font-weight:400;*/
    text-align: center;
    line-height: 1.8;
}

.close-rect{
    display: block;
    position: absolute;
    background-color: #289be5;
    color: #fcfcfc;
    bottom: 3%;
    width: 10rem;
    margin-left:-5rem;
    left: 50%;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: .4rem;
    text-align: center;
}

.successHead{
    color: #7e8589;
    text-align: center;
    top: 25%;
    /*position: absolute;*/
    width: 100%;
    font-size:1rem;
    margin: 1rem auto;
}

.successDesc{
    color: #444444;
    font-size:.8rem;
    margin: 1rem 1rem .3rem 1rem ;
    line-height: 1.4rem;
}

.body-rect img{
    width: 94%;
    margin: .2rem 3%;
    border-radius: .3rem;
}

p.blankLine{
    display: block;
    width: 1rem;
    height: .7rem;
    line-height: .7rem;
}